<template>
        <div class="persondetail" style="margin-top:20px">
          <div v-if="pageloading" style="padding:20px;">数据加载中...</div>
          <el-tabs v-model="tabflag" v-else>
            <el-tab-pane :label="mytitle">
              <div style="padding:10px;">
                <el-input type="textarea" :rows="myrows" v-model="mycontent" maxlength="4000" show-word-limit></el-input>
                <el-button type="primary" style="margin-top:10px;clear:both" icon="el-icon-document-checked" @click="savecontent" :loading="saveloading">保存</el-button>
                <div style="padding:10px 10px 0;" v-if="message&&message!==''&&typeof(message)!=='object'">
                  <span v-if="objtype===myobjtypes.COMMON_TYPE_KAOHE_BANZI||objtype===myobjtypes.COMMON_TYPE_KAOHE_GEREN">考核情况：</span>
                  <span v-if="objtype===myobjtypes.COMMON_TYPE_YIBAOGAOLIANGPINGYI_BANZI||objtype===myobjtypes.COMMON_TYPE_YIBAOGAOLIANGPINGYI_GEREN">评议情况：</span>
                  <b>{{message}}</b>
                </div>
                <div style="padding:10px 10px 0;" v-if="message&&message!==''&&typeof(message)==='object'">
                  <table width="100%">
                    <tr>
                      <td width="50%" valign="top">
                        <table class="ticketTable" cellspacing="0" cellpadding="0" v-if="objtype===myobjtypes.COMMON_TYPE_KAOHE_GEREN&&message.person&&message.person.kaoHeFenList">
                          <tr>
                            <th colspan="5" width="150" align="center">{{myobject.name}} {{message.person.theyear}} 年度个人考核情况</th>
                          </tr>
                          <tr>
                            <th width="120" align="center">选票类型</th>
                            <th width="60" align="center">满分</th>
                            <th width="60" align="center">得分</th>
                            <th width="60" align="center">票数</th>
                            <th>备注</th>
                          </tr>
                          <template>
                            <tr v-for="(item,index) in message.person.kaoHeFenList" :key="index" :style="item.thetype==='综合'?'font-weight:bolder':''">
                              <td align="center">{{item.thetype}}</td>
                              <td align="center">{{item.manfen}}</td>
                              <td align="center">{{item.value}}</td>
                              <td align="center">{{item.ticketnum?item.ticketnum:''}}</td>
                              <td>{{item.remark}}</td>
                            </tr>
                          </template>
                        </table>
                      </td>
                      <td width="50%" valign="top">
                        <table class="ticketTable" cellspacing="0" cellpadding="0" v-if="objtype===myobjtypes.COMMON_TYPE_KAOHE_GEREN&&message.unit&&message.unit.kaoHeFenList">
                          <tr>
                            <th colspan="5" width="150" align="center">{{myobject.name}} {{message.unit.theyear}} 年度所在 {{message.unit.name}} 单位班子考核情况</th>
                          </tr>
                          <tr>
                            <th width="120" align="center">选票类型</th>
                            <th width="60" align="center">满分</th>
                            <th width="60" align="center">得分</th>
                            <th width="60" align="center">票数</th>
                            <th>备注</th>
                          </tr>
                          <template>
                            <tr v-for="(item,index) in message.unit.kaoHeFenList" :key="index" :style="item.thetype==='综合'?'font-weight:bolder':''">
                              <td align="center">{{item.thetype}}</td>
                              <td align="center">{{item.manfen}}</td>
                              <td align="center">{{item.value}}</td>
                              <td align="center">{{item.ticketnum?item.ticketnum:''}}</td>
                              <td>{{item.remark}}</td>
                            </tr>
                          </template>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <table class="ticketTable" cellspacing="0" cellpadding="0" v-if="objtype===myobjtypes.COMMON_TYPE_YIBAOGAOLIANGPINGYI_GEREN&&message!==[]&&message.person&&message.person.length>0">
                    <tr>
                      <th colspan="6" width="150" align="center">{{myobject.name}} “一报告两评议”情况</th>
                    </tr>
                    <tr>
                      <th width="60" align="center">年度</th>
                      <th width="100" align="center">选票类型</th>
                      <th width="300" align="center">单位</th>
                      <th width="150" align="center">职务</th>
                      <th width="60" align="center">票数</th>
                      <th>结果</th>
                    </tr>
                    <template v-for="(item,index) in message.person" >
                      <template v-for="(it,idx) in item.pingYiFenList" >
                        <tr :key="index*1000+idx">
                          <td v-if="idx===0" :rowspan="item.pingYiFenList.length" align="center" style="vertical-align: middle;">{{item.theyear}}</td>
                          <td align="center">{{it.thetype}}</td>
                          <td align="center">{{it.unitname}}</td>
                          <td align="center">{{it.zhiwu}}</td>
                          <td align="center">{{it.ticketnum}}</td>
                          <td align="center">{{it.jieguo}}</td>
                        </tr>
                      </template>
                    </template>
                  </table>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="'附件列表'+(objtype===myobjtypes.COMMON_TYPE_KAOHE_BANZI||objtype===myobjtypes.COMMON_TYPE_KAOHE_GEREN?'（年度总结、要点等）':'')">
              <el-table :height="fjheight" :data="filename">
                <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth"></el-table-column>
                <el-table-column label="文件名">
                  <template slot-scope="scope">
                    {{scope.row}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                    <el-button size="small" @click="setOrder(filepathname[scope.$index],myobject.id,true)" type="text" icon="el-icon-arrow-up" :loading="orderloading" :class="scope.$index===0?'disableBtn':''" :disabled="scope.$index===0">上移</el-button>
                    <el-button size="small" @click="setOrder(filepathname[scope.$index],myobject.id,false)" type="text" icon="el-icon-arrow-down" :loading="orderloading" :class="scope.$index===(filename.length-1)?'disableBtn':''" :disabled="scope.$index===(filename.length-1)">下移</el-button>
                    <el-button size="small" @click="delfj(filepathname[scope.$index],myobject.id)" type="text" icon="el-icon-delete" :loading="orderloading" >删除</el-button>
                    <el-button size="small" @click="fjdownload(filepathname[scope.$index],myobject.id)" type="text" icon="el-icon-download">下载</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-upload class="upload-demo" :on-success="uploadsuccess" name="file" :file-list="uploadfilelist"
                :action="this.$http.defaults.baseURL + 'common/base/upload/'+this.myobject.id" with-credentials :on-error='uploaderror'>
                <el-button type="primary" icon="el-icon-paperclip">上传附件</el-button>
              </el-upload>
            </el-tab-pane>
          </el-tabs>
        </div>
</template>
<script>
import * as objtypes from '@/constvalue/commonvalues'
import Chart from '@/components/Chart.vue'
export default {
  components: {
    Chart
  },
  watch: {
    showunitname: {
      handler (val) {
      },
      immediate: true
    },
    title: {
      handler (val) {
      },
      immediate: true
    },
    objtype: {
      handler (val) {
      },
      immediate: true
    },
    personId: {
      handler (val) {
        console.log('personId:')
        console.log(val)
        this.mytestid = val
      },
      immediate: true
    },
    theyear: {
      handler (val) {
        this.getDetail(true)
      },
      immediate: true
    },
    myheight: {
      handler (val) {
        if (val === 1) {
          this.fjheight = '238px'
          this.myrows = 8
        }
        if (val === 2) {
          this.fjheight = '242px'
          this.myrows = 7
        }
      },
      immediate: true
    }
  },
  props: {
    title: '',
    objtype: '',
    personId: '',
    showunitname: '',
    theyear: '',
    myheight: ''
  },
  data () {
    return {
      orderloading: false,
      pageloading: true,
      myobjtypes: objtypes,
      chartmsg: {},
      fjheight: '130px',
      myrows: 4,
      message: '',
      mycontent: '',
      tabflag: '',
      saveloading: false,
      uploadfilelist: [],
      filename: [],
      filepathname: [],
      myobject: {},
      mytitle: '',
      // mytestid: '110102196211082773',
      mytestid: ''
    }
  },
  methods: {
    setOrder (filepathname, id, up) {
      let para = {
        id: id,
        filepathname: filepathname,
        up: up
      }
      this.orderloading = true
      this.$http
        .post(`/common/base/updownfj/`, para)
        .then(response => {
          this.orderloading = false
          if (response.data.success) {
            this.getDetail(false)
          } else {
            this.$message({
              message: '调整排序失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.orderloading = false
          console.log(error)
          this.$message({
            message: '调整排序网络调用失败:' + error,
            type: 'error'
          })
        })
    },
    delfj (filepathname, id) {
      this.$confirm('确定要删除该附件吗?', '提示', {
        type: 'success'
      }).then(() => {
        let para = {
          id: id,
          filepathname: filepathname
        }
        this.orderloading = true
        this.$http
          .post(`/common/base/removefj/`, para)
          .then(response => {
            this.orderloading = false
            if (response.data.success === true) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getDetail(false)
            } else {
              this.$message({
                message: response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            this.orderloading = false
            this.$message({
              message: '删除失败:' + error,
              type: 'error'
            })
          })
      })
    },
    fjdownload (filepathname, id) {
      window.open(this.$http.defaults.baseURL + 'common/base/file/' + id + '/' + filepathname)
    },
    uploaderror (err) {
      console.log('具体错误')
      console.log(err)
      this.$message({
        message: '上传失败：' + err,
        type: 'error'
      })
    },
    uploadsuccess () {
      this.getDetail(false)
      this.uploadfilelist = []
    },
    savecontent () {
      let para = {
        id: this.myobject.id,
        content: this.mycontent
      }
      this.saveloading = true
      this.$http
        .post(`/common/savebase/`, para)
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
          this.saveloading = false
        })
        .catch(error => {
          this.$message({
            message: '保存失败:' + error,
            type: 'error'
          })
          this.saveloading = false
        })
    },
    getDetail (flag) {
      this.pageloading = flag
      this.myobject = {}
      let url = ''
      if (this.theyear) {
        url = `/common/base/` + this.personId + '/' + this.objtype + '/' + this.theyear
      } else {
        console.log(this.objtype)
        url = `/common/base/` + this.personId + '/' + this.objtype
        // if (this.objtype === '10' || this.objtype === '11') {
        //   url = `/common/base/` + this.personId + '/' + this.objtype + '/0'
        // } else {
        //   url = `/common/base/` + this.personId + '/' + this.objtype
        // }
      }

      this.$http
        .get(url)
        .then(response => {
          this.pageloading = false
          this.myobject = response.data.content
          this.message = response.data.message
          this.mycontent = this.myobject.thecontent
          if (this.myobject.filepathname) {
            this.filepathname = JSON.parse(this.myobject.filepathname)
          } else {
            this.filepathname = []
          }
          if (this.myobject.filename) {
            this.filename = JSON.parse(this.myobject.filename)
          } else {
            this.filename = []
          }
          if (this.showunitname) {
            this.mytitle = this.myobject.unitname + this.title
          } else {
            this.mytitle = this.title
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    }

  },
  mounted () {
  }
}
</script>
<style scoped>
.disableBtn{
  color: #ccc !important;
}
</style>
<style>
#zhfxyp .el-table td, .el-table th{
  padding:2px 0;
}
#zhfxyp .el-textarea__inner{
  font-size:var(--size18) !important;
  color:#000 !important;
}
.ticketTable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
}
.ticketTable td ,.ticketTable th {
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align: top;
    line-height: 150%;
}
.ticketTable th {
  background: #C0DCF1;
}
</style>
